<template>
  <div>
    <Breadcrumb :style="{margin: '24px 0'}">
      <BreadcrumbItem>数据分析</BreadcrumbItem>
      <BreadcrumbItem>
        <router-link to="/index/analyzeAllVisitor">总访问量</router-link>
      </BreadcrumbItem>
    </Breadcrumb>
    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
      <div id="container"></div>
<div id="sliders">
	<table>
		<tr>
			<td>α 角（内旋转角）</td>
			<td><input id="alpha" type="range" min="0" max="45" value="15"/> <span id="alpha-value" class="value"></span></td>
		</tr>
		<tr>
			<td>β 角（外旋转角）</td>
			<td><input id="beta" type="range" min="-45" max="45" value="15"/> <span id="beta-value" class="value"></span></td>
		</tr>
		<tr>
			<td>深度</td>
			<td><input id="depth" type="range" min="20" max="100" value="50"/> <span id="depth-value" class="value"></span></td>
		</tr>
	</table>
</div>
    </Content>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {},
  mounted() {
    var chart = new Highcharts.Chart({
	chart: {
		renderTo : 'container',
		type     : 'column',
		options3d: {
			enabled     : true,
			alpha       : 15,
			beta        : 15,
			depth       : 50,
			viewDistance: 25
		}
	},
	title: {
		text: '微信访问总量'
	},
	subtitle: {
		// text: '可通过滑动下方滑块测试'
	},
	plotOptions: {
		column: {
			depth: 25
		}
	},
	series: [{
		name: '小程序&公众号访问总量',
		data: [0, 0, 0, 0, 0, 10, 50, 138, 348, 520, 662, 729]
	}]
});
// 将当前角度信息同步到 DOM 中
var alphaValue = document.getElementById('alpha-value'),
    betaValue  = document.getElementById('beta-value'),
    depthValue = document.getElementById('depth-value');
function showValues() {
	alphaValue.innerHTML = chart.options.chart.options3d.alpha;
	betaValue.innerHTML  = chart.options.chart.options3d.beta;
	depthValue.innerHTML = chart.options.chart.options3d.depth;
}
// 监听 sliders 的变化并更新图表
$('#sliders input').on('input change', function () {
	chart.options.chart.options3d[this.id] = this.value;
	showValues();
	chart.redraw(false);
});
showValues();
  },
};
</script>